<template>
    <div class="背景">
        <div class="页眉">
        </div>
        <el-row :gutter="16" type="flex" justify="center">
            <el-col :span="4">
                <div class="文本框" style="height: 800px;">
                    <div class="标题">
                        富吾财经
                    </div>
                    <br/>
                    <el-menu router>
                        <el-menu-item index="/" >
                            <div class="小标题">
                                富头条
                            </div>
                        </el-menu-item>
                        <el-menu-item index="/" >
                            <div class="小标题">
                                视频
                            </div>
                        </el-menu-item>
                        <el-menu-item index="/" >
                            <div class="小标题">
                                直播
                            </div>
                        </el-menu-item>
                        <el-menu-item index="/" >
                            <div class="小标题">
                                资讯
                            </div>
                        </el-menu-item>
                        <el-menu-item index="/" >
                            <div class="小标题">
                                富吾号
                            </div>
                        </el-menu-item>
                        <el-menu-item index="/" >
                            <div class="小标题">
                                关于我们
                            </div>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
            <el-col :span="12">

                <div class="文本框">
                    <h1>这里是文章标题</h1>
                    <div class="article-meta">
                        <span class="original-tag">原创</span>
                        <span>央视新闻</span>
                        <span>2021-05-23 10:25:11</span>
                    </div>
                    <article>
                        <p>{{$route.query.id}}</p>
                        <p>{{$route.query.uid}}</p>
                        <p>这是一个自然段</p>
                        <p>这是一个自然段</p>
                        <p>这是一个自然段</p>
                        <p>这是一个自然段</p>
                    </article>
                    <div class="article-action">
                        <span>收藏</span>
                        <span>举报</span>
                    </div>
                    <div class="comment-area">
                        <div class="comment-meta">
                            <span>542条评论</span>
                        </div>
                        <div class="input-area">写下您的评论</div>
                        <div class="comment-list">
                            <ul>
                                <li>
                                    <div class="comment-item">
                                        这是一条评论
                                    </div>
                                </li>
                                <li>
                                    <div class="comment-item">
                                        这是一条评论
                                    </div>
                                </li>
                                <li>
                                    <div class="comment-item">
                                        这是一条评论
                                    </div>
                                </li>
                                <li>
                                    <div class="comment-item">
                                        这是一条评论
                                    </div>
                                </li>
                                <li>
                                    <div class="comment-item">
                                        这是一条评论
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="load-more-comment">
                            <button>查看更多评论</button>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="6">
                <div class="文本框">
                    <el-row>
                        <el-col :span="20">
                            <el-input placeholder="搜索站内资讯、视频或用户" v-model="search" prefix-icon="el-icon-search"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="文本框" style="padding: 40px;">
                    <div class="文本 居中">
                        登录后可以保存您的浏览喜好、评论、收藏，并与APP同步，更可以发布富头条、视频与直播
                    </div>
                    <br/>
                    <div class="居中" >
                        <el-button type="primary" style="width:80%;">登录</el-button>
                    </div>

                </div>
                <div class="文本框 居中">
                    扫码下载富吾app
                </div>
                <div class="文本框">
                    <div class="文本-中">
                        更多
                    </div>
                </div>
                <div class="文本框">
                    <div class="文本-中">
                        友情链接
                    </div>
                    <el-tabs v-model="activeName">
                        <el-tab-pane>
                            <span slot="label" class="文本">综合</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" class="文本">财经</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" class="文本">银行</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" class="文本">证券</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" class="文本">保险</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" class="文本">基金</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" class="文本">房屋</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" class="文本">收藏</span>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="文本框">
                    <div class="文本-中">
                        法规公布
                    </div>
                </div>

            </el-col>
        </el-row>
        <div class="页眉"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search :'',
                activeName:0,
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            async init() {
                const token = window.sessionStorage.getItem("idUser");
                console.log(token)
                const id=this.$route.query.id
                const uid=this.$route.query.uid
                const {data: res} = await this.$http.get('http://39.102.77.65:8081/article/detail', {
                    params: {idArticle:id,idArticleUser:uid,idUser:token}
                })
                console.log(res)
            }
        }

    };

</script>
